<template>
  <div>
    <sm-viewer :sceneUrl="sceneUrl">
      
    </sm-viewer>
  </div>
</template>

<script>
import { curUrl3 } from "util/prodUrl";
export default {
  data() {
    return {
      icons: [
        {
          id: 1001,
          name: "1组",
          position: { x: 117.74187, y: 42.42087, z: 1300 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/1/krpano.xml",
        },
        {
          id: 1002,
          name: "2组",
          position: { x: 117.7326062399276, y: 42.43069910106486, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/2/krpano.xml",
        },
        {
          id: 1003,
          name: "3组",
          position: { x: 117.7268856773804, y: 42.43957932907419, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/3/krpano.xml",
        },
        {
          id: 1004,
          name: "4组",
          position: { x: 117.7478364656279, y: 42.47403770960266, z: 1450 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/4/krpano.xml",
        },
        {
          id: 1005,
          name: "5组",
          position: { x: 117.7250439538266, y: 42.44856987814954, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/5/krpano.xml",
        },
        {
          id: 1006,
          name: "6组",
          position: { x: 117.719064128125, y: 42.45096709244352, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/6/krpano.xml",
        },
        {
          id: 1007,
          name: "7组",
          position: { x: 117.6978012737577, y: 42.45698788320112, z: 1300 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/7/krpano.xml",
        },
        {
          id: 1008,
          name: "8组",
          position: { x: 117.7054468386461, y: 42.46661852832335, z: 1300 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/8/krpano.xml",
        },
        {
          id: 1009,
          name: "9组",
          position: { x: 117.6864956404071, y: 42.4659414047978, z: 1450 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/9/krpano.xml",
        },
        {
          id: 10010,
          name: "10组",
          position: { x: 117.6767759596108, y: 42.47114850783513, z: 1500 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/10/krpano.xml",
        },
        {
          id: 10011,
          name: "11组",
          position: { x: 117.6729147112425, y: 42.47621251011676, z: 1550 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/11/krpano.xml",
        },
      ],
      iconsClick: [
        {
          name: "点击",
          position: { x: 117.719064128125, y: 42.45096709244352, z: 1220 },
          icon: require("assets/img/map/ico2.png"),
        },
      ],
    };
  },
  props: {
    sceneUrl: {
      type: String,
      default:
        "http://123.56.65.68:8090/iserver/services/3D-hhlQxNew/rest/realspace",
    },
  },
  mounted() {
    this.configS();
    this.addMap();
    this.addIcons();
    this.pickClick();
    // this.lookto(
    //   {
    //     x: -2193309.816798971,
    //     y: 4173923.358545551,
    //     z: 4302385.731224303,
    //   },
    //   6.256739508155098,
    //   -0.6296448310731169,
    //   6.283185307179586
    // );
  },
  methods: {
    configS() {
      // 取消默认的双击事件
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );
      // 抗锯齿
      viewer.scene.postProcessStages.fxaa.enabled = false;
      // 水雾特效
      viewer.scene.globe.showGroundAtmosphere = true;
      // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
      viewer.scene.screenSpaceCameraController.constrainedPitch =
        Cesium.Math.toRadians(-20);
      // 倾斜视图 鼠标左键旋转
      viewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.RIGHT_DRAG,
      ];
      // 缩放设置 重新设置缩放成员
      viewer.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.MIDDLE_DRAG,
        Cesium.CameraEventType.WHEEL,
        Cesium.CameraEventType.PINCH,
      ];
      viewer.scene.screenSpaceCameraController.rotateEventTypes = [
        Cesium.CameraEventType.LEFT_DRAG,
      ];
    },
    addMap() {
       // viewer.imageryLayers.addImageryProvider(
      //   new Cesium.TiandituImageryProvider({
      //     credit: new Cesium.Credit("https://t{s}.tianditu.gov.cn/DataServer"),
      //     token: "9ae78c51a0a28f06444d541148496e36",
      //   })
      // );
      //加载地形
      viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: "http://data.mars3d.cn/terrain",
        requestWaterMask: true,
        requestVertexNormals: true,
        isSct: false,
      });
    },
    addIcons() {
      for (const ico of this.icons) {
        this.setIco(ico.position, ico.icon, ico.name, ico.id);
      }
      for (const ico of this.iconsClick) {
        this.setIco(ico.position, ico.icon, ico.name);
      }
    },
    setIco(position, image, name, id) {
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(
          position.x,
          position.y,
          position.z
        ),
        show: true,
        id: id,
        billboard: {
          image,
          color: Cesium.Color.WHITE.withAlpha(1),
          height: 27,
          width: 20,
          rotation: 0,
          sizeInMeters: false,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          pixelOffset: new Cesium.Cartesian2(0, 10),
          scale: 1.0,
          show: true,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            40000
          ),
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        label: {
          text: name,
          font: "normal 12px MicroSoft YaHei",
          scale: 1,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.fromCssColorString("rgba(255,255,255, 1.0)"),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -20),
          showBackground: true,
          backgroundColor: Cesium.Color.fromCssColorString("rgba(0,0,0, 0.5)"),
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            40000
          ),
        },
      });
    },
    pickClick() {
      let handlers = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handlers.setInputAction((movement) => {
        let pick = viewer.scene.pick(movement.position);
        if (Cesium.defined(pick) && pick.id._billboard != undefined) {
          if (
            pick.id.billboard._image._value ==
            require("assets/img/map/ico2.png")
          ) {
            this.$emit("openImg", require("assets/img/sy/nc-info.png"));
          } else if (
            pick.id.billboard._image._value == require("assets/img/map/ico.png")
          ) {
            for (const ion of this.icons) {
              if (pick.id._id == ion.id) {
                this.$emit("showvr", ion.url);
              }
            }
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    lookto(position, heading, pitch, roll) {
      scene.camera.setView({
        destination: position,
        orientation: {
          heading,
          pitch,
          roll,
        },
      });
    },
    lookfly(position, heading, pitch, roll) {
      viewer.camera.flyTo({
        destination: position,
        duration: 5,
      });
      setTimeout(() => {
        viewer.camera.flyTo({
          destination: position,
          orientation: {
            heading,
            pitch,
            roll,
          },
          duration: 5,
        });
      }, 4800);
    },
  },
};
</script>

<style lang="scss" scoped>
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
}
</style>